<!-- 主要组件 -->
<script setup lang="ts">
import { ref, computed } from 'vue'
import zoom from '@/assets/bit-screen/monitor/zoom.png'
import Player from '@/components/Player.vue'

const props = defineProps({
  cell: { type: Number, required: true },
  showPortList: { type: Array, default: () => [] }
})

const getVideoAIOptions = (item) => {
  return {
    id: `video_${item.id}`,
    width: '100%',
    height: '100%',
    source: item.url,
    // source:
    //   'https://easycvr-local.t-aaron.com:1445/flv/live/34020000001110000005_34020000001320000002_0200000002.flv',
    isLive: false
  }
}

const videoRefs = ref<(typeof Player)[]>([])
const handleZoom = (index: number) => {
  console.log(`Zoom video at index: ${index}`) // 确认函数被调用
  window.dispatchEvent(new CustomEvent('parentEvent', { detail: index }))
}
</script>

<template>
  <div :class="{ 'grid-container9': cell === 9, 'grid-container4': cell === 4 }">
    <div class="grid-item" v-for="item in cell" :key="item">
      <div
        v-if="showPortList[item - 1]"
        class="relative flex justify-between flex-col h-100% border-solid border-1 border-[#0C6EBA]"
      >
        <div
          class="flex justify-between items-center p-6px"
          style="box-sizing: border-box; background-color: rgba(12, 110, 186, 0.7)"
        >
          <div class="flex justify-center items-center">
            <div class="item-title mr-5px">{{ showPortList[item - 1].name }} </div>
            <div
              class="text-xs h-18px bg-[rgba(12,110,186,0.3)] rounded-sm border-1 border-[#396de6]"
            >
              {{ showPortList[item - 1].astatus==0?'任务中':'在线' }}
            </div>
          </div>
          <img class="w-17px h-17px cursor-pointer" :src="zoom" alt="" @click="handleZoom(index)" />
        </div>
        <div class="video-container flex-1 bg-[#092F51]">
          <Player
            ref="el => videoRefs.value[index] = el"
            :options="getVideoAIOptions(showPortList[item - 1])"
          />
          <!-- <Player
            ref="el => videoRefs.value[index] = el"
            :options="getVideoAIOptions(item,`video_${item}`)"
          /> -->
        </div>
      </div>

      <div class="grid__empty" v-else>
        <img src="@/assets/bit-screen/monitor/video.png" alt="" />
        请从左侧选择视频播放
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.grid-container4 {
  margin: 0 15px;
  font-family: PingFang SC;
  overflow: hidden;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  height: 95%;
  overflow: hidden;
}
.grid-container9 {
  margin: 0 15px;
  font-family: PingFang SC;
  height: 95%;
  overflow: hidden;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}
.grid-item {
  padding: 20px;
  background: rgba(12, 110, 186, 0.2);
  border: 1px solid #0c6eba;
}
.grid__empty {
  position: relative;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 12px;
  img {
    margin-bottom: 10px;
  }
}
</style>
